import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    inputValue: '', 
    nextTo: 5,
    infolist: [],
    viewKey: 'all'
  },
  mutations: {
    //列表渲染
    infolist(state, list) {
      state.infolist = list
    },
    //搜索
    setInputValue(state, val) {
      state.inputValue = val
    },
    //添加按钮
    addInfoList(state, date) {
      state.infolist.push({
        done: false,
        id: state.nextTo,
        info: date
      })
      state.inputValue = ''
      state.nextTo++
    },
    //点击删除
    del(state, id) {
      console.log(id)
      state.infolist = state.infolist.filter(item => {
        if (item.id != id) {
          return item
        }
      })
    },
    //点击多选框
    buzhidao(state, params) {
      console.log(params);
      state.infolist.forEach(item => {
        if (item.id == params.id) {
          item.done = params.flhg
        }
      })
    },
    //删除完成的
    delAll(state) {
      state.infolist = state.infolist.filter(item => {
        if (item.done != true) {
          return item
        }
      })
    },
    changeList(state, key) {
      state.viewKey = key
    }
  },
  actions: {
    async getList(state) {
      var {
        data: res
      } = await axios.get('list.json')
      state.commit('infolist', res)
      // state.infolist = res
    },
  },
  getters: {
    unDoneLength(state) {
      return state.infolist.filter(x => x.done === false).length
    },
    infolist(state) {
      if (state.viewKey == 'all') {
        return state.infolist
      }
      if (state.viewKey == 'undone') {
        return state.infolist.filter(item => !item.done)
      }
      if (state.viewKey == 'done') {
        return state.infolist.filter(item => item.done)
      }
      return state.infolist
      // infolist(state) {
      //   if (state.viewKey === 'all') {
      //     return state.list
      //   }
      //   if (state.viewKey === 'undone') {
      //     return state.list.filter(x => !x.done)
      //   }
      //   if (state.viewKey === 'done') {
      //     return state.list.filter(x => x.done)
      //   }
      //   return state.list
      // }
    }
  }
})
